<template>
  <div>
    <h1>todo list</h1>
    <div>
      <input 
        type="text" 
        v-on:keyup.enter="handleKeyUp"
        v-model="keywords"
      >
    </div>
    <ul>
      <li v-for="(task, index) in tasks">
        {{task}} <button v-on:click="handleClick(index)">x</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keywords: '',
      tasks: [
        '吃饭',
        '睡觉',
        '打豆豆'
      ]
    }
  },

  methods: {
    handleKeyUp(e) {
      // this.tasks.push('abc')
      this.tasks.push(this.keywords)
      this.keywords = ''
    },
    // handleInput(e) {
    //   // console.log(e.target.value)
    //   // this.tasks.push(e.target.value)
    //   this.keywords = e.target.value
    // }
    handleClick(index) {
      this.tasks.splice(index, 1)
    }
  }
}
</script>